<template>
	<view>
		<view class="bg-white px-[20rpx]  mt-[20rpx]">
			<view 
				class="flex h-[110rpx] text-[30rpx] items-center ">
				<view class="flex items-center w-[170rpx]">
					<p>用户名</p>
				</view>
				<!-- -->
				<view class="">
					<!-- <up--input  v-model="username" @blur="blurname" border="none" type="nickname"
						style="background-color: white;"  placeholder="请输入用户名"></up--input> -->
						<input class="w70" type="nickname" @blur="blurname" v-model.trim="username" placeholder="请输入昵称">

				</view>
			</view>
		</view>
		<view class="py-[20rpx] px-[20rpx] w-full fixed left-0 bottom-[40rpx] box-border">
			<up-button @click="sendData" :customStyle="{borderRadius:'20rpx',height:'98rpx'}" color="#FE861C">
				确认修改
			</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {name} from '@/api/my.js'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	let username = ref()
	onLoad((e)=>{
		username.value=e.name
	})
	 const blurname=(e)=> {
			console.log(e,"111111111");
	      username.value = e.detail.value
	    }
	let sendData =()=>{
		switch(true){
			case username.value=="" :
			 uni.showToast({
			 	title:"用户名不能为空",
				icon:'none'
			 })
			 return;
			 case username.value.length>19 :
			  uni.showToast({
			  	title:"用户名过长，不能超过20个字",
			 	icon:'none'
			  })
			  return;
		}
		name({nickname:username.value}).then(res=>{
			if(res.code == 200){
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			}else{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		})
	}
	
</script>

<style lang="scss">

</style>
